<template>
	<div class="index">
		<Header></Header>
		<!-- 内容 -->
		<div class="w65 ma">
			<!-- 面包屑 -->
			<breadcrumb></breadcrumb>
		</div>
		<div class="conent-top">
			<div class="fwb fz105 pb1">{{ getDetails.title }}</div>
			<div class="c999 fz05 pb1 ml05">关键字：{{ getDetails.intro }}</div>
			<!-- <div class="w100 tac" style="margin: auto;"><img style="width: 100%; height: 23rem;" :src="url + getDetails.image" alt="" /></div> -->
			<div class="pt2">
				<span class="fz05">简单介绍</span>
				<div style="font-size: 0.5rem;height: 100%; min-height: 25rem;" v-html="getDetails.content">{{ getDetails.content }}</div>
			</div>
			<div class="fz05 w100 tar">{{ formatDate(getDetails.create_time) }}</div>
			<div style="width: 100%; display: flex; justify-content: center; margin: 2rem 0;">
				<div style="margin: 0 1rem;" class="fz05 c14a fwb cp">
					<span v-if="ups == ''"></span>
					<span v-else @click="upPiece(up.id)" class="turnPage">
						<el-tooltip class="item" effect="dark" :content="ups.title" placement="top">
							<span>上一篇 {{ ups.title }}</span>
						</el-tooltip>
					</span>
				</div>
				<div style="margin: 0 1rem;" class="fz05 c14a fwb cp">
					<span v-if="nexts == ''"></span>
					<span v-else @click="nextPiece(next.id)" class="turnPage">
						<el-tooltip class="item" effect="dark" :content="nexts.title" placement="top">
							<span>下一篇 {{ nexts.title }}</span>
						</el-tooltip>
					</span>
				</div>
			</div>
		</div>
		<!-- 底部 -->
		<Footer></Footer>
	</div>
</template>

<script>
import breadcrumb from '@/components/breadcrumb .vue';
import { geologyDetails } from '@/api/resourceCenter.js';
export default {
	name: '',
	components: {
		breadcrumb
	},
	data() {
		return {
			getDetails: {},
			up: {},
			ups: null,
			nexts: null,
			next: {}
		};
	},
	created() {
		this.geologyDetailsturn(this.$route.query.id);
	},
	methods: {
		upPiece(val) {
			this.geologyDetailsturn(val);
		},
		nextPiece(val) {
			this.geologyDetailsturn(val);
		},
		geologyDetailsturn(id) {
			geologyDetails({ id }).then(res => {
				this.getDetails = res.data.arr;
				this.ups = res.data.up;
				this.up = res.data.up;
				this.nexts = res.data.next;
				this.next = res.data.next;
			});
		}
	}
};
</script>

<style scoped lang="scss">
.conent-top {
	width: 65%;
	height: 100%;
	min-height: 65rem;
	margin: auto;
	background-color: #ffffff;
	padding: 1rem;
	box-sizing: border-box;
}
.turnPage {
	width: 150px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	display: block;
}
</style>
